<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/axios.min.js"></script>
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>添加用户</legend>
</fieldset>

<form id="myForm" action="/user?type=addUser" method="post" class="layui-form">

    <div class="layui-form-item">
        <label class="layui-form-label" for="userName">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="userName" id="userName" placeholder="请输入"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label" for="userPwd">密码</label>
        <div class="layui-input-block">
            <input type="text" name="userPwd" id="userPwd" placeholder="请输入"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label" for="userTel">手机号</label>
        <div class="layui-input-block">
            <input type="text" name="userTel" id="userTel" placeholder="请输入"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label" for="userEmail">邮箱</label>
        <div class="layui-input-block">
            <input type="text" name="userEmail" id="userEmail" placeholder="请输入"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <input type="hidden" id="roleId" name="roleId" value="${param.roleId}">

    <hr>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button id="btn" type="button" class="layui-btn">添加</button>
        </div>
    </div>
</form>

<script src="./layui/layui.js"></script>
<script>
    layui.use('form', function () {
        var form = layui.form;

        //各种基于事件的操作，下面会有进一步介绍
    });
</script>

<script>
    let myForm = $("#myForm");
    let btn = $("#btn");
    let userName = $("#userName");
    let userPwd = $("#userPwd");
    let userTel = $("#userTel");
    let userEmail = $("#userEmail");
    let roleId = $("#roleId")

    btn.on("click", function () {
        if (userName.val() === "" || userPwd.val() === "") {
            alert("用户名和密码不可为空！");
            return;
        } else {
            if (userTel.val() !== "" && userTel.val().length !== 11) {
                alert("手机号请输入正确格式");
                return;
            }
        }
        alert("校验用户名~");
        axios.get("/user?type=checkName", {
            params: {
                userName: userName.val()
            }
        }).then(res => {
            if (res.data == null) {
                alert("添加成功");
                myForm.submit();
            } else {
                alert("该用户名已被使用，请修改！");
            }
        }).catch(error => {
            console.log("出错：" + error);
        });
    });
</script>

</body>
</html>
